{% extends "templates/panoptic_base.html" %}

{% block meta_block %}
{% include "templates/includes/meta_block.html" %}
{% endblock %}

{% block content %}
<section class="container border-b border-r border-l flex flex-col md:flex-row">
	<article class="text-white border-r w-full md:w-2/3">
		<div class="p-5 md:p-8 lg:p-12">
			<div class="prose prose-md">
				<h1>{{ doc.title }}</h1>
				{{ frappe.utils.md_to_html(doc.content) }}
			</div>
		</div>
		<div class="flex flex-wrap border-t p-5 md:p-8 lg:p-12">
			<div class="w-full md:w-1/2">
				<span class="text-teal-blue-300">Published By</span>
				{% set member_doc = frappe.get_doc("Team Member", published_by) %}
				{{ web_block(
					"Avatar",
					values={
						"member": member_doc,
						"mt": 2
					},
					add_container=0,
					add_top_padding=0,
					add_bottom_padding=0,
				) }}
			</div>
			<div class="w-full md:w-1/2 md:text-right mt-6 md:mt-0">
				<span class="text-teal-blue-300">Share this {{ category }}</span>
				<div class="mt-2 md:mt-4">
					<a href="https://twitter.com/intent/tweet?text={{ title }}%20%23ProjectPanoptic%20%23PanopticColumn&url={{ site_url }}/{{ route }}"
						class="text-teal-blue-200 ml-2 fa fa-twitter" target="_blank"></a>

					<a href="https://www.facebook.com/sharer.php?u={{ site_url }}/{{ route }}"
						class="text-teal-blue-200 ml-2 fa fa-facebook" target="_blank"></a>

					<a href="https://www.linkedin.com/sharing/share-offsite/?url={{ site_url }}/{{ route }}"
						class="text-teal-blue-200 ml-2 fa fa-linkedin" target="_blank"></a>

					<a href="mailto:?subject=Panoptic RTI filed to {{ authority }}&body={{ site_url }}/{{ route }}"
						class="text-teal-blue-200 ml-2 fa fa-envelope" target="_blank"></a>
				</div>
			</div>
		</div>
	</article>
	<div class="p-5 md:p-8 lg:p-12 block w-full md:w-1/3 text-teal-blue-300">
		<div class="hidden md:block mb-12 pr-12">
			<p class="text-teal-blue-100">{{ description or '' }}</p>
			<div class="mt-4">
				Published on <b>{{ frappe.format_date(published_date) }}</b>
			</div>
			{{ web_block(
				"Avatar",
				values={
					"member": member_doc,
					"mt": 4
				},
				add_container=0,
				add_top_padding=0,
				add_bottom_padding=0,
			) }}
		</div>

		<div class="mb-12 hidden md:block">
			<h3>Table of Contents</h3>
			<div class="mt-3 toc-html">
				{{ frappe.utils.md_to_html(doc.content).toc_html }}
			</div>
		</div>

		{% if frt|length %}
		<div class=" mb-12">
			<h3>FRTs Mentioned</h3>
			<ul class="mt-3">
				{% for link_frt in frt %}
				{% set frt_doc = frappe.get_doc("FRT", link_frt.frt) %}
				<li class="mb-1">
					<a class="hover:underline text-orange-500" href="/{{ frt_doc.route }}">
						{{ frt_doc.authority }}</a>
				</li>
				{% endfor %}
			</ul>
		</div>
		{% endif %}
		{% if other_links|length %}
		<div class="mb-12">
			<h3>Other Links</h3>
			<ul class="mt-3">
				{% for link in other_links %}
				<li>
					<a class="hover:underline text-orange-500" href="{{ link.link }}">{{ link.title }}</a>
				</li>
				{% endfor %}
			</ul>
		</div>
		{% endif %}
		<div class="mb-12 hidden md:block">
			<span class="text-teal-blue-300">Share this {{ category }}</span>
			<div class="mt-4">
				<a href="https://twitter.com/intent/tweet?text={{ title }}%20%23Panoptic%20%23PanopticColumn&url={{ site_url }}/{{ route }}"
					class="text-teal-blue-200 fa fa-twitter" target="_blank"></a>

				<a href="https://www.facebook.com/sharer.php?u={{ site_url }}/{{ route }}"
					class="text-teal-blue-200 ml-2 fa fa-facebook" target="_blank"></a>

				<a href="https://www.linkedin.com/sharing/share-offsite/?url={{ site_url }}/{{ route }}"
					class="text-teal-blue-200 ml-2 fa fa-linkedin" target="_blank"></a>

				<a href="mailto:?subject=Panoptic {{ category }}: {{ title }}&body={{ site_url }}/{{ route }}"
					class="text-teal-blue-200 ml-2 fa fa-envelope" target="_blank"></a>
			</div>
		</div>
	</div>
</section>
{% endblock %}
